<template>
  <div>
    <h1>This is TheSelf component</h1>
    <TheSelfItem class="other">
      <template #head>
        <h2 class="head">This is head slot content</h2>
      </template>
      <template #body>
        <p class="body">This is body slot content</p>
      </template>
      <p>This is default slot content</p>
      <!-- Ensure all elements are closed before closing TheSelfItem -->
    </TheSelfItem>
  </div>
</template>

<script setup lang="ts">
import TheSelfItem from './TheSelfItem.vue'
</script>

<style scoped>
.head {
  color: blue;
}
.body {
  color: green;
}
.other {
  color: orange;
}
</style>
